import  React, { Component } from 'react';
import Topic from './components/Topic';
import List from './components/List';
import Recommend from './components/Recommend';
import Writer from './components/Writer';
import { connect } from 'react-redux';
import { actionCreaters }  from './store'
import { BackTop,Carousel } from 'antd';
import 'antd/dist/antd.css';
import {
        HomeWrapper,
        HomeLeft,
        HomeRight
    } from './style'


class Home extends Component{
    render(){
        return(
           <HomeWrapper>

               <HomeLeft>
               <Carousel autoplay="true">
                   <img alt="banner" className='banner-img' src="https://upload.jianshu.io/admin_banners/web_images/4510/7398b3b419943278df10ce09a5358575f19e2178.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
                   <img alt="banner" className='banner-img' src="https://upload.jianshu.io/admin_banners/web_images/4526/73a226693f83ee2920d31207c881b7c6eeb46761.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
                   <img alt="banner" className='banner-img' src="https://upload.jianshu.io/admin_banners/web_images/4528/cfbfae092b2d7f29a4bc52e906dfd89a5e8ac16d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
                </Carousel>
                    <Topic/>
                    <List/>
               </HomeLeft>

               <HomeRight>
                   <Recommend/>
                   <Writer/>
               </HomeRight>

               <BackTop visibilityHeight={200}/>

           </HomeWrapper>
        )
    }

    componentDidMount() { 
       this.props.getHomeList()
    }
}




const mapDispatchToProps=(dispatch)=>{
    return{
        getHomeList(){
            dispatch(actionCreaters.getHomeInfo())
        }
    }
}



export default connect(null,mapDispatchToProps)(Home)
